<template>
  <div class="width-test">
    <h2>盒模型与width</h2>
    <p><strong>盒模型</strong></p>
    <p>分为标准盒模型和ie的盒模型content + padding + border + margin构成了盒子。</p>
    <p>假如有position，margin外层是position，元素的定位是整个盒子（自然包括margin）来做定位。</p>
    <p>margin不属于宽高部分。</p>
    <p>标准模型为默认属性： box-sizing: content-box; ------ width = content</p>
    <p>ie盒模型： box-sizing: border-box; ------ width = content + padding + border</p>
    <p>通过dom.getBoundingClientRect()获得页面中元素的左，上，右和下分别相对浏览器视窗的位置，与元素的宽高。</p>
    <p><strong>width样式</strong></p>
    <p>width与height属性只有块状元素(block)与内联块元素(inline-block)才有。给内联元素(inline)设置宽高不会生效。</p>
    <p>width默认值为: auto</p>
    <div>子元素的border-box（content + padding + border）+ margin === 父.content</div>
    <div>因为width:auto相当于没有固定值，给子元素设置box-sizing属性无效。</div>
    <p>width: 100% ------ 子元素.content = 父.content</p>
    <p><strong>width样式示例</strong></p>
    <div>橙色的是父的border、绿色的是子的bordr。若父设置border-box，父的content会小一些，对应子的宽度也会小一些。</div>
    <p>width:auto，此时宽度不固定，设置box-sizing不起作用。图为子有padding，没有margin与border的样子。</p>
    <div class="f-box">
      <div class="c-box1"></div>
    </div>
    <p>width:auto，子的border-box(content + padding + border) + margin总宽，等于父的content宽度。</p>
    <div class="f-box">
      <div class="c-box2"></div>
    </div>
    <p>width:100%，子默认的盒模型，content宽度，等于父的content宽度。</p>
    <div class="f-box">
      <div class="c-box3"></div>
    </div>
    <p>width:100%，子使用border-box，border-box(content + padding + border)，等于父的content宽度</p>
    <div class="f-box">
      <div class="c-box4"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'widthtest'
  };
</script>

<style lang="scss" scoped>
  .width-test {
    .f-box {
      width: 340px;
      height: 100px;
      background-color: $--pink-blue-bg;
      border: 10px solid #ff6600;
      box-sizing: border-box;
      // padding: 10px;
    }
    .c-box1 {
      width: auto;
      height: 50px;
      padding: 0 10px;
      background-color: $--pink-blue;
    }
    .c-box2 {
      width: auto;
      height: 50px;
      padding: 0 20px;
      margin: 0 10px;
      border-left: 10px solid #096;
      border-right: 10px solid #096;
      background-color: $--pink-blue;
    }
    .c-box3 {
      width: 100%;
      height: 50px;
      padding: 0 20px;
      margin: 0 10px;
      border-left: 10px solid #096;
      border-right: 10px solid #096;
      background-color: $--pink-blue;
    }
    .c-box4 {
      width: 100%;
      height: 50px;
      padding: 0 20px;
      margin: 0 10px;
      border-left: 10px solid #096;
      border-right: 10px solid #096;
      background-color: $--pink-blue;
      box-sizing: border-box;
    }
  }
</style>